<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>My First Parcel App: parcel3</title>
  <link href="style.css" rel="stylesheet" />
  <!-- <link href="tailwind.css" rel="stylesheet" /> -->
  <script src="./env.ts"></script>
  <script id="insertion"></script>
  <script>
    /** 同步阻塞方式测试 cdn js 是否通 */
    function tryCDN(jsurl) {
      try {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", jsurl, false);
        // DOMException: Failed to set the 'timeout' property on 'XMLHttpRequest': Timeouts cannot be set for synchronous requests made from a document.
        // xhr.timeout = 1500; // do not use it 
        xhr.send();
        // alert(xhr.status);
        console.log('---- xhr ----');
        console.dir(xhr);
        if (xhr.status === 200) {
          return true;
        } else {
          return false;
        }
      } catch (e) {
        console.error(e);
        return false;
      }
    }
    const testMap = {
      jsdelivr_: 'https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min_.js',
      jsdelivr: 'https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js',
    };
    let targetCDN;
    const cdnList = Object.keys(testMap)
    for (let i = 0; i < cdnList.length; i++) {
      const cdn = cdnList[i];
      const url = testMap[cdn];
      console.log(i, cdn, url);
      if (tryCDN(url)) {
        targetCDN = cdn;
        break;
      }
    }
    if (!targetCDN) {
      console.warn('no available CDN ！！！');
    } else {
      console.info(`cdn ${targetCDN}`);
    }
    // parser-blocking, cross site (i.e. different eTLD+1) script,
    // https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.development.js, is invoked via document.write. 
    // The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. 
    // If blocked in this page load, it will be confirmed in a subsequent console message. 
    // See https://www.chromestatus.com/feature/5718547946799104 for more details.
    const scriptMap = {
      jsdelivr_: `
      <script src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.development.js" integrity="sha256-QoQkvFHtz5oCOcl2oGlRo0NnSv5iAC8rMtEUDx31wCQ=" crossorigin="anonymous"><]script>
      <script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.development.js" integrity="sha256-SxURW871LR4j9t5iZ7x9lieLlmxT4XsmJKUSeaLe3wE=" crossorigin="anonymous"><]script>
      `,
      jsdelivr: `
      <script src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.development.js" integrity="sha256-QoQkvFHtz5oCOcl2oGlRo0NnSv5iAC8rMtEUDx31wCQ=" crossorigin="anonymous"><]script>
      <script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.development.js" integrity="sha256-SxURW871LR4j9t5iZ7x9lieLlmxT4XsmJKUSeaLe3wE=" crossorigin="anonymous"><]script>
      `
    }
    const targetScript = scriptMap[targetCDN].replace(/<]script>/mg, '</' + 'script>');
    // alert(targetScript);
    document.write(targetScript);
    // document.getElementById('insertion').insertAdjacentHTML("afterend", targetScript);
  </script>
</head>

<body>
  <h1>Hello, World!</h1>
  <div id="app"></div>
  <script src="index.tsx" type="module"></script>
  <script>console.log('window.React', window.React)</script>
</body>

</html>